@extends('layouts.mobile_main')

@section('title', '买单')

@section('resources')
    @parent
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="{{ env('CSS_DOMAIN') }}css/public.css?v={{env('CSS_VERSION')}}">
    <script src="{{ env('JS_DOMAIN') }}/js/adaptation.js?v={{env('JS_VERSION')}}"></script>
@endsection
<style>
	.pay_way{background-color: #eee;}
	.pay_way li{float: left;width: 9.6rem;height: 6rem;border-radius: 0.15rem;background-color: #fff;margin: 0.6rem 0.6rem 0;text-align: center;}
	.pay_way li img{width: 1.2rem;margin-top: 2rem;}
	.pay_way li p{font-size: 0.4rem;color: #3f3f3f;margin-top: 0.3rem;}
	.pay_way li a{width: 9.6rem;height: 6rem;display: inline-block;}
	.pay{background-color: #9955c6;}
	#goto_download{width: 7rem;height: 4.2rem;background-color: #fff;position: fixed;top: 50%;left: 50%;margin-left: -4.1rem;margin-top: -2.1rem;padding: 0 0.6rem;}
    #goto_download .download_text{margin-bottom: 1rem;margin-top: 0.7rem}
    #goto_download .close_download{padding: 0.3rem 0.4rem;border: 1px solid #ccc;color: #ccc;border-radius: 0.2rem;}
    #goto_download .go_download{padding: 0.3rem 0.4rem;background-color: #9955c6;color: #fff;border-radius: 0.2rem;}
    .pay_shop_out{width: 100%;background: rgba(0,0,0,0.5);position: absolute;top: 0;left: 0;display: none;}
</style>
@section('content')
<body>
	<header class="pay oh">
		<a class="fl" href="javascript:history.go(-1);"><img class="fl" src="{{env('IMAGE_DOMAIN')}}images/back_w.png?v={{env('IMAGE_VERSION')}}" alt=""></a>
		<span class="fl co_white fz_48">买单</span>
	</header>
	<ul class="pay_way oh">
		<li class="pay_forshop">
			<img src="{{env('IMAGE_DOMAIN')}}images/scan.png" alt="">
			<p>我来扫商家</p>
		</li>
		<li>
			<a href="/mobile/wallet/pay">
				<img src="{{env('IMAGE_DOMAIN')}}images/erweima_p.png" alt="">
				<p>出示二维码</p>
			</a>
		</li>
	</ul>
	<nav class="pay_shop_out">
		<div id="goto_download">
			<p class="fz_48 tc download_text">该功能请下载翻贝网APP体验</p>
	        <p>
	            <span class="close_download fz_40 fl">下次再说</span>
	            <span class="go_download fz_40 fr">前往下载app</span>
	        </p>
		</div>
    </nav>
@endsection

@section('scriptResources')
    @parent
    <script>
	    window.onresize=function(){
		    pagesp();
	    }
	    $(function(){
		    var pay_way_h = $(window).height()-$(".pay").height();
		    $(".pay_shop_out").height($(window).height());
		    $(".pay_way").css({"min-height":pay_way_h});
		    $(".pay_forshop").click(function(){
                $(".pay_shop_out").show();
            });
            $(".close_download").click(function(){
                $(".pay_shop_out").hide();
            });
            $(".go_download").click(function(){
                window.open("/mobile/app/download","_blank");
                $(".pay_shop_out").hide();
            });
	    })
    </script>
@endsection